<template>
    <div class="getan-table-toolbar">
        <div class="getan-table-toolbar-left">
            <GetanButtonGroup v-if="leftActions" :options="leftActions" />
            <slot name="toolbarLeft"></slot>
        </div>
        <div class="getan-table-toolbar-right">
            <GetanButtonGroup v-if="rightActions" :options="rightActions" />
            <slot name="toolbarRight"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { GetanButtonGroup } from "@/components/ButtonGroup"

const props = defineProps<{ actions: any[] }>()
const leftActions = computed(() => props.actions[0])
const rightActions = computed(() => props.actions[1])
</script>

<style lang="less" scoped>
.getan-table-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 0 0 8px 0;

    &-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1;

        &-title {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 16px;
            font-weight: 600;
        }
    }

    &-right {
        display: flex;
        justify-content: flex-end;
        flex: 1;

        &-icon {
            margin-left: 12px;
            font-size: 16px;
            cursor: pointer;
            color: var(--text-color);

            :hover {
                color: #1890ff;
            }
        }
    }
}
</style>
